<template>
  <section>
    <div class="columns">
      <div class="column is-full">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span
              ><i class="fa fa fa-book"> {{ $t("post.theme2") }}</i></span
            >
          </div>
          <div>
            <el-form :model="form" ref="form" class="demo-topic">
              <el-form-item prop="title">
                <el-input
                  v-model="form.title"
                  @blur="form.title=$event.target.value.trim()"
                  :placeholder="$t('post.enterTopic2')"
                ></el-input>
              </el-form-item>

              <!--Markdown-->
              <div id="vditor"></div>

              <b-taginput
                v-model="form.tags"
                class="my-3"
                maxlength="15"
                maxtags="3"
                ellipsis
                :placeholder="$t('post.enterTag')"
              />
              <el-form-item class="mt-3">
                <el-button type="primary" @click="submitForm()"
                  >{{ $t("post.update") }}
                </el-button>
                <el-button @click="resetForm()">{{
                  $t("post.reset")
                }}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
    </div>
  </section>
</template>

<script>
import { getPost, updatePost } from "@/api/post";
import Vditor from "vditor";
import "vditor/dist/index.css";
import toolbar from "@/util/toolbar";

export default {
  name: "TopicEdit",
  components: {},
  data() {
    return {
      form: {
        id: this.$route.params.id,
        title: "",
        conetent: "",
        tags: [],
      },
      rawData: {},
    };
  },
  created() {
    this.fetchTopic();
  },
  methods: {
    renderContent(content) {
      this.contentEditor = new Vditor("vditor", {
        lang: this.$i18n.locale === "zh" ? "zh_CN" : "en_US",
        height: 500,
        placeholder: this.$t("post.enterContent"),
        theme: "classic",
        mode: "wysiwyg",
        icon: "material",
        tab: "    ",
        typewriterMode: true,
        toolbarConfig: {
          pin: true,
        },
        counter: {
          enable: true,
          type: "markdown",
        },
        cache: {
          enable: false,
        },
        preview: {
          maxWidth: 10000,
          delay: 0,
          hljs: {
            enable: true,
            lineNumber: true,
            style: "monokai",
          },
        },
        toolbar,
        after: () => {
          this.contentEditor.setValue(content);
        },
      });
    },
    fetchTopic() {
      getPost(this.$route.params.id).then((resp) => {
        let { data } = resp;
        this.rawData = data;
        this.form.title = data.topic.title;
        this.form.tags = data.tags.map((tag) => tag.name);
        this.renderContent(data.topic.content);
      });
    },
    submitForm() {
      this.form.content = this.contentEditor.getValue();
      updatePost(this.form).then((resp) => {
        let { code, message } = resp;
        if (code === 200) {
          setTimeout(() => {
            this.$router.push({
              name: "post-detail",
              params: { id: this.$route.params.id },
            });
          }, 800);
        } else {
          this.$message.error(message);
        }
      });
    },
    resetForm() {
      this.form.title = this.rawData.topic.title;
      this.form.tags = this.rawData.tags.map((tag) => tag.name);
      this.contentEditor.setValue(this.rawData.topic.content);
    },
  },
};
</script>

<style>
.vditor-reset pre > code {
  font-size: 100%;
}
</style>
